<template>
	<view class="content">
		<view class="head flex justify-center align-center ">
			<u-search
				placeholder="请输入小区名称"
				@change="change"
				@clear="clear"
				@search="search"
				@custom="custom"
				v-model="keyword"
				:show-action="false"
			></u-search>
		</view>

		<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box ">
			<view v-for="(item, index) in propertysInfo" :key="index" class="margin-top">
				<view class="list shadow  padding flex " @click="jump('/pages/user-center/pay?id=' + item.id)">
					<image
						:src="item.image"
						mode="aspectFill"
						class="radius"
						lazy-load
						style="width: 110rpx; height: 110rpx;"
						@click.stop="preview(item.image)"
					></image>
					<view class="margin-left flex flex-direction justify-between tag flex-sub ">
						<text>{{ item.name }}</text>
						<text class="text-cut block" style="width: 60vw;">{{ item.address }}</text>
					</view>
				</view>
			</view>
			<image
				v-if="!propertysInfo.length"
				src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/dataIsEmpty.png"
				mode="aspectFill"
				class="emptyIcon "
			></image>
		</scroll-view>
		<u-toast ref="uToast" />
		
	</view>
</template>

<script>
const app = getApp();
export default {
	data() {
		return {
			keyword: '',
			propertysInfo: [],
		};
	},
	onLoad() {
		//获取物业列表数据
		app.globalData.api.getPropertys(1, 10).then(res => {
			this.propertysInfo = res.rows;
		});
	},
	methods: {
		jump(url) {
			
			uni.navigateTo({
				url,
			});
		},
		async change(e) {
			if (!e) {
				app.globalData.api.getPropertys(1, 10).then(res => {
					this.propertysInfo = res.rows;
				});
			}
		},
		async clear() {
			app.globalData.api.getPropertys(1, 10).then(res => {
				this.propertysInfo = res.rows;
			});
		},
		async search(e) {
			app.globalData.api.searchPropertys(1, 10, { name: e }).then(res => {
				this.propertysInfo = res.rows;
				if (!this.propertysInfo.length) {
					this.$refs.uToast.show({ title: '无小区地址~~', type: 'error' });
				}
			});
		},
		async custom() {},
		loadMore(){
			this.$refs.uToast.show({ title: '暂无更多~~', type: 'success' });
		},
		preview(urls) {
			uni.previewImage({
				urls: [urls],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					},
				},
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	height: 100vh;
	.scroll-box {
		width: 100vw;
		height: calc(100vh - 100rpx);
	}
	.head {
		width: 100vw;
		height: 100rpx;
		background-color: #f8ce39;
		/deep/ .u-search {
			display: flex;
			align-items: center;
			width: 690rpx;
		}
	}
	.list {
		width: 690rpx;
		// height: 200rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 0 auto;
		.tag {
			text:nth-child(1) {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			text:nth-child(2) {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
			.distance {
				text {
					display: inline-block;
					background: linear-gradient(90deg, #f8ce39, #ffe791);
					border-radius: 6rpx;
					padding: 0 5rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}
}
</style>
